<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>按钮</title>
</head>
<body>
<div class="pageheader">
    <h2>按钮</h2>
</div>
<div class="contentpanel">
    <div class="panel panel-default">
        <form:form commandName="formListDto" cssClass="form-horizontal form-bordered">
            <form:errors path="addNewButton" cssClass="error text-danger"/>
            <c:if test="${empty param.parent_id}">
                <form:hidden path="parent_id"/>
            </c:if>
            <div class="form-group">
                <label class="col-sm-3 control-label">按钮名称</label>

                <div class="col-sm-6">
                    <form:input path="name" cssClass="form-control" placeholder="请输入按钮名称"/>
                    <form:errors path="name" cssClass="error text-danger"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">按钮类型</label>

                <div class="col-sm-6">
                    <form:select path="type" items="${formListDto.allButtonType}" itemLabel="label"
                                 class="form-control selectType"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">按钮key值</label>

                <div class="col-sm-6">
                    <form:input path="key" cssClass="form-control search-rule" placeholder="请输入按钮的key值(跳转类型按钮不填)"/>
                    <form:errors path="key" cssClass="error text-danger"/>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label">跳转链接</label>

                <div class="col-sm-6">
                    <form:textarea path="url" rows="5" cssClass="form-control search-article"
                                   placeholder="跳转链接(点击类型的按钮不填)"/>
                    <form:errors path="url" cssClass="error text-danger"/>
                </div>
            </div>
            <c:forEach items="${formListDto.buttonList}" var="item" varStatus="status">
                <div class="well">
                    <form:hidden path="buttonList[${status.index}].uuid"/>
                    <form:hidden path="buttonList[${status.index}].parent_id"/>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">按钮名称</label>

                        <div class="col-sm-5">
                            <form:input path="buttonList[${status.index}].name" cssClass="form-control"
                                        placeholder="请输入按钮名称"/>
                            <form:errors path="buttonList[${status.index}].name" cssClass="error text-danger"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label">按钮类型</label>

                        <div class="col-sm-5">
                            <form:select path="buttonList[${status.index}].type" items="${formListDto.allButtonType}"
                                         itemLabel="label"
                                         class="form-control selectType${status.index}"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label">按钮key值</label>

                        <div class="col-sm-5">
                            <form:input path="buttonList[${status.index}].key" cssClass="form-control search-rule"
                                        placeholder="请输入按钮的key值(跳转类型按钮不填)"/>
                            <form:errors path="buttonList[${status.index}].key" cssClass="error text-danger"/>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-4 control-label">跳转链接</label>

                        <div class="col-sm-5">
                            <form:textarea path="buttonList[${status.index}].url" rows="3"
                                           cssClass="form-control search-article"
                                           placeholder="跳转链接(点击类型的按钮不填)"/>
                            <form:errors path="buttonList[${status.index}].url" cssClass="error text-danger"/>
                        </div>
                    </div>
                </div>
            </c:forEach>

            <div class="form-group">
                <label class="col-sm-3 control-label"></label>

                <div class="col-sm-6">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <a href="javascript:window.history.go(-1);" class="btn btn-default">取消</a>
                </div>
            </div>
        </form:form>
    </div>
</div>
<script>
    $(function () {
        if ($(".selectType").children('option:selected').val() == ("view")) {
            $(".selectType").parent().parent().next('div').hide();
        }
        if ($(".selectType").children('option:selected').val() == ("click")) {
            $(".selectType").parent().parent().next('div').next('div').hide();
        }

        for (var i = 0; i < 5; i++) {
            if ($(".selectType" + i + "").children('option:selected').val() == ("view")) {
                $(".selectType" + i + "").parent().parent().next('div').hide();
            }
            if ($(".selectType" + i + "").children('option:selected').val() == ("click")) {
                $(".selectType" + i + "").parent().parent().next('div').next('div').hide();
            }
        }
        $(".selectType").on("change", function () {
            if ($(this).children('option:selected').val() == ("view")) {
                $(this).parent().parent().next('div').next('div').show();
                $(this).parent().parent().next('div').children().children('input').val("");
                $(this).parent().parent().next('div').hide();
            }
            if ($(this).children('option:selected').val() == ("click")) {
                $(this).parent().parent().next('div').show();
                $(this).parent().parent().next('div').next('div').children().children('textarea').val("");
                $(this).parent().parent().next('div').next('div').hide();
            }
        });

        bindAutoComplete($(".search-article"), "${contextPath}/admin/article/search_article", function (item) {
            return {
                label: item.title,
                value: item.url
            }
        });
        bindAutoComplete($(".search-rule"), "${contextPath}/admin/wechat/search_rule", function (item) {
            return {
                label: item.keyWord,
                value: item.keyWord
            }
        });

        function bindAutoComplete(target, url, callBack) {
            $(target).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: url,
                        dataType: "json",
                        data: {
                            key: request.term
                        },
                        success: function (data) {
                            response($.map(data, callBack));
                        }
                    });
                },
                minLength: 1,
                select: function (event, ui) {
                    if (ui.item) {
                    }
                }
            });
        }
    });

</script>
</body>
</html>